<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>熊猫不走蛋糕</title>
    <link href="https://cdn.bootcss.com/weui/2.1.2/style/weui.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.9/lib/index.css" />
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.9/lib/vant.min.js"></script>
    <script type="text/javascript">
        var baseUrl = '/api/xmbz-order'; //接口请求链接地址
        function getSessionId() {
            var getuuid = sessionStorage.getItem("uuid");
            console.log("sessionId:" + getuuid)
            if (getuuid == undefined || getuuid == null || getuuid === '') {
                getuuid = generateUUID();
                sessionStorage.setItem('uuid', getuuid);
            }
            console.log("sessionId:" + getuuid)
            return getuuid;

        }

        function generateUUID() {
            var d = new Date().getTime();
            if (window.performance && typeof window.performance.now === "function") {
                d += performance.now(); //use high-precision timer if available
            }
            var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = (d + Math.random() * 16) % 16 | 0;
                d = Math.floor(d / 16);
                return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
            });
            return uuid;
        }
    </script>
    <style type="text/css">
        body,
        html {
            height: 100%;
            -webkit-tap-highlight-color: transparent;
            background: #efefef;
        }
        input, input::placeholder {
            font-size: 16px;
            color: #666666;
        }
        .content {
            margin-top: -10px;
            padding-top: 5px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            padding-left: 10px;
            padding-right: 10px;
            background: #efefef;
        }

        .bg-bar {
            background-color: #d51717;
            height: 10px;
        }

        .demos-title {
            background: url("title_bg.png") no-repeat;
            text-align: center;
            font-size: 34px;
            color: #3cc51f;
            font-weight: 400;
            background-size:100% 100%;
        }

        .demos-sub-title {
            text-align: left;
            color: rgba(69, 90, 100, 0.6);
            font-size: 14px;
        }

        .demos-header {
        }

        .demos-content-padded {
            padding: 15px;
        }

        footer {
            text-align: center;
            font-size: 14px;
            padding: 20px;
        }

        footer a {
            color: #999;
            text-decoration: none;
        }

        .logo {

        }

        .logo img {
            margin-top: 25px;
            width: 250px;
        }

        .van-uploader__input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            cursor: pointer;
            opacity: 0;
        }

        .activeImg {
            left: 0;
            right: 0;
            width: 100px;
            height: 100px;
            display: block;
            text-align: center;
            line-height: 100px !important;
        }

        #ordNo::placeholder {
            font-size: 11px;
            padding-top: 5px;
        }

        .weui-check {
            visibility: hidden;
        }

        .add-tag{
            padding: 5px;
            text-align: center;
            align-items: center;
            -webkit-box-align: center;
            width: 20px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
        }
        .relationship {
            -webkit-user-select :none
        }

        .text-small {
            color: hotpink;
            font-size: 12px;
        }

        /*改写边框及横线*/
        .weui-cells {
            border-radius: 10px;
        }
        .weui-cells:after, .weui-cells:before {
            position: fixed;
        }
        .weui-cell:before {
            left: 0;
        }
        /*改写cell样式*/
        .weui-cell {
            padding: 10px;
        }
        .weui-cell__hd, .weui-cell__hd {
            font-size: 16px!important;
        }
        /*改写上传框样式*/
        .weui-uploader__input-box {
            background: url("camara-icon.png") no-repeat left 50% top 50%;
            border-width: 2px;
            border-color: #dfdfdf;
            border-style: dashed;
            border-radius: 3px;
        }

        .weui-uploader__input-box:after, .weui-uploader__input-box:before {
            width: 0;
        }

        .weui-btn_primary {
            background: #d51717;
            width: 90%;
        }

        .weui-icon-info {
            color: #dfdfdf;
        }

        .title-bar {
            display: flex;
            padding: 10px;
            align-items: center;;
        }

        .title-bar .title {
            color: #d51717;
            margin-left: 10px;
        }

        .title-bar .tip {
            height: 15px;
            padding: 2px 5px;
            font-size: 12px;
            color: #ffffff;
            margin-left: 10px;
            background: #d51717;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }
    </style>
</head>


<body ontouchstart>
<div id="page1">
    <header class='demos-header'>
        <h1 class="demos-title">
            <div class="logo"><img src="title_img.png"></div>
        </h1>
    </header>
    <div class="bg-bar"></div>

    <div class="content">
        <div class="weui-cells title-bar">
            <svg t="1618655711531" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1849" width="24" height="24"><path d="M384 216h264v-52.4c0-24.08 19.528-43.6 44-43.6 24.304 0 44 19.84 44 43.6V216h136c17.68 0 32 15.208 32 33.976v620.048c0 18.768-14.32 33.976-32 33.976H152c-17.68 0-32-15.208-32-33.976V249.976C120 231.2 134.32 216 152 216h144v-52.4c0-24.08 19.528-43.6 44-43.6 24.304 0 44 19.84 44 43.6V216z m0 72v52.4c0 24.08-19.528 43.6-44 43.6-24.304 0-44-19.84-44-43.6V288H184v552h656V288H736v52.4c0 24.08-19.528 43.6-44 43.6-24.304 0-44-19.84-44-43.6V288H384zM296 494.208C296 481.944 305.416 472 318.208 472h43.584C374.056 472 384 481.416 384 494.208v43.584C384 550.056 374.584 560 361.792 560h-43.584C305.944 560 296 550.584 296 537.792v-43.584z m176 0C472 481.944 481.416 472 494.208 472h43.584C550.056 472 560 481.416 560 494.208v43.584C560 550.056 550.584 560 537.792 560h-43.584C481.944 560 472 550.584 472 537.792v-43.584z m176 0C648 481.944 657.416 472 670.208 472h43.584C726.056 472 736 481.416 736 494.208v43.584C736 550.056 726.584 560 713.792 560h-43.584C657.944 560 648 550.584 648 537.792v-43.584z m-352 176C296 657.944 305.416 648 318.208 648h43.584C374.056 648 384 657.416 384 670.208v43.584C384 726.056 374.584 736 361.792 736h-43.584C305.944 736 296 726.584 296 713.792v-43.584z m176 0C472 657.944 481.416 648 494.208 648h43.584C550.056 648 560 657.416 560 670.208v43.584C560 726.056 550.584 736 537.792 736h-43.584C481.944 736 472 726.584 472 713.792v-43.584z m176 0C648 657.944 657.416 648 670.208 648h43.584C726.056 648 736 657.416 736 670.208v43.584C736 726.056 726.584 736 713.792 736h-43.584C657.944 736 648 726.584 648 713.792v-43.584z" fill="#d51717" p-id="1850"></path></svg>
            <span class="title">生日提醒管家</span>
            <span class="tip">不再忘记重要的日子</span>
        </div>
        <div class="weui-cells ">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">关系</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input relationship" unselectable="on" onfocus="this.blur()" readonly="readonly"  type="text" placeholder="点击选择重要的人">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">生日</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input birthday"  type="text" placeholder="请选择TA的生日">
                </div>
            </div>
        </div>
        <div v-show="tagNum > 0" class="weui-cells" style="display: none">
            <div class="weui-cell">
                <div class="weui-cell__hd" @click="tagNum--"><i class="weui-icon-cancel"></i></div>
                <div class="weui-cell__hd"><label class="weui-label">关系</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input relationship" unselectable="on" onfocus="this.blur()" readonly="readonly" type="text" placeholder="点击选择重要的人">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">生日</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input birthday"  type="text" placeholder="请选择TA的生日">
                </div>
            </div>
        </div>
        <div v-show="tagNum > 1" class="weui-cells" style="display: none">
            <div class="weui-cell">
                <div class="weui-cell__hd" @click="tagNum--"><i class="weui-icon-cancel"></i></div>
                <div class="weui-cell__hd"><label class="weui-label">关系</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input relationship" unselectable="on" onfocus="this.blur()" readonly="readonly" type="text" placeholder="点击选择重要的人">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">生日</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input birthday"  type="text" placeholder="请选择TA的生日">
                </div>
            </div>
        </div>

        <div v-show="tagNum < 2">
            <div class="add-tag" @click="tagNum++">
                <svg t="1617268802752" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2106" width="24" height="24"><path d="M661.333333 490.666667h-128v-128a21.333333 21.333333 0 0 0-42.666666 0v128h-128a21.333333 21.333333 0 0 0 0 42.666666h128v128a21.333333 21.333333 0 0 0 42.666666 0v-128h128a21.333333 21.333333 0 0 0 0-42.666666z" fill="#646464" p-id="2107"></path><path d="M512 85.333333a426.666667 426.666667 0 1 0 426.666667 426.666667A427.157333 427.157333 0 0 0 512 85.333333z m0 810.666667a384 384 0 1 1 384-384 384.426667 384.426667 0 0 1-384 384z" fill="#646464" p-id="2108"></path></svg>
            </div>
        </div>

        <div class="weui-cells title-bar">
            <svg t="1618656646952" class="icon" viewBox="0 0 1057 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2782" width="24" height="24"><path d="M528.516129 891.870968l-210.580645 110.724129a99.096774 99.096774 0 0 1-143.789419-104.481032l40.200258-234.496-170.347355-166.053162a99.096774 99.096774 0 0 1 54.899613-169.026064l235.453935-34.22142L439.659355 80.929032a99.096774 99.096774 0 0 1 177.713548 0l105.306839 213.355355 235.453935 34.221419a99.096774 99.096774 0 0 1 54.899613 169.026065l-170.347355 166.053161 40.200259 234.529033a99.096774 99.096774 0 0 1-143.78942 104.448L528.516129 891.870968z" fill="#d51717" p-id="2783"></path></svg>            <span class="title">填写好评信息</span>
            <span class="tip">最高返现99元</span>
        </div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">单号</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" id="ordNo" type="text" placeholder="蛋糕盒外标签纸上单号或购买平台的订单号">
                </div>
                <div class="weui-cell__ft" onclick="showTip()">
                    <i class="weui-icon-info" style="display:block;"></i>
                </div>
            </div>

            <!--        <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">卡密</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" id="cdkey" type="text" placeholder="请输入卡密">
                </div>
                <div class="weui-cell__ft" onclick="showTip1()">
                    <i class="weui-icon-info" style="display:block;"></i>
                </div>
            </div>-->
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" id="validate" type="number" placeholder="请输入验证码">
                </div>
                <div class="weui-cell__ft">
                    <img id="validateImg" src=""
                         onclick="$(this).attr({src:baseUrl+'/OrdersPraise/open/validate?uuid=' + getSessionId() +'&_t=' + new Date().getTime()});">
                </div>
            </div>

            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">好评截图</label></div>
                <div class="weui-cell__bd">
                    <div class="weui-uploader">
                        <div class="weui-uploader__bd">
                            <ul class="weui-uploader__files">
                                <li data-target="#previewDialog" class="weui-uploader__file open-popup"
                                    style="display: block;background-size:contain; background-image: url(preview.png)">
                                </li>
                                <li id="preViewImg" data-img="" class="weui-uploader__file" style="display: none">
                                </li>
                                <div class="weui-uploader__input-box" id="uploader">
                                    <input id="uploaderInput" name="uploader" class="weui-uploader__input" type="file" accept="image/*" multiple="">
                                </div>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="weui-cells__tips" style="font-size:12px;color: #666666;padding-left: 105px;margin-bottom: 10px">
                请主人到购买平台，点亮五星+好评内容，成功提交好评后的截图上传此处（如公众号购买，则需拍蛋糕发朋友圈集赞截图上传此处哟~）
            </div>
        </div>
        <div style="padding-bottom: 50px;margin-top: 28px;">
            <a class="weui-btn weui-btn_primary" href="javascript:" onclick="submitInfo()">提交</a>
        </div>
        <div id="previewDialog" class="weui-popup__container popup-bottom">
            <div class="weui-popup__overlay"></div>
            <div class="weui-popup__modal">
                <div class="toolbar">
                    <div class="toolbar-inner">
                        <a href="javascript:;" class="picker-button close-popup">关闭</a>
                        <h1 class="title">示例图片</h1>
                    </div>
                </div>
                <div class="modal-content" style="text-align: center">
                    <img src="preview.png" style="height: 300px;">
                </div>

            </div>
        </div>
    </div>
</div>

<div id="page2" style="display: none">
    <div class="weui-msg">
        <div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
        <div class="weui-msg__text-area">
            <h2 class="weui-msg__title">提交成功</h2>
            <p class="weui-msg__desc">请关注公众号“熊猫不走蛋糕”留意审核信息</p>
        </div>

        <div class="weui-msg__extra-area">
            <div class="weui-footer">
                <p class="weui-footer__links">
                </p>
            </div>
        </div>
      </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script>
      // 在 #app 标签下渲染一个按钮组件
      var app = new Vue({
        el: '#page1',
        data() {
          return {
            activeUrl: '',
            base64Image: '',
            tagNum: 0
          }
        },
      });
      // 可以通过下面的方式手动注册
      Vue.use(vant.Uploader);
    </script>
    <script type="text/javascript">
      var openId = null,
        nickName = null;

    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg); //search,查询？后面的参数，并匹配正则
        if (r != null) return unescape(r[2]);
        return null;
    }

    var code = GetQueryString('code')
    if (code == null) {
        openId = sessionStorage.getItem("openId");
        if (openId == undefined || openId == null || openId == '') {
            $.ajax({
                url: baseUrl + '/OrdersPraise/open/auth',
                // data: {
                //   url: "http://test.xiongmaodangao.com/index.html",
                //   uuid: sessionStorage.getItem("uuid"),
                // },
                data: {url: window.location.href, uuid: sessionStorage.getItem("uuid"),},
                type: "get",
                success: function (data) {
                    window.location = data.data.authUrl;
                },
                error: function () {
                    alert("请刷新页面重试, CODE_ERROR_1001")
                }
            });
        }

    } else {
        openId = sessionStorage.getItem("openId");
        nickName = sessionStorage.getItem("nickName");
        unionid = sessionStorage.getItem("nickName");
        if (openId == 'undefined' || openId == null || openId == '') {
            $.ajax({
                url: baseUrl + '/OrdersPraise/open/openid',
                type: "get",
                data: {
                    code: code,
                    uuid: sessionStorage.getItem("uuid"),
                },
                success: function (data) {
                    if (data.data.openId == '') {
                        window.location = window.location.href.split("?")[0];
                    } else {
                        console.log(data.data)
                        sessionStorage.setItem('openId', data.data.openId);
                        sessionStorage.setItem('nickName', data.data.user.nickname);
                        sessionStorage.setItem('unionid', data.data.user.unionid);
                        openId = data.data.openId;
                        nickName = data.data.user.nickname;
                        unionid = data.data.user.unionid;
                    }

                },
                error: function () {
                    alert("请刷新页面重试, CODE_ERROR_1003")
                }
            });
        }
    }
</script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
<script src="LocalResizeIMG.js" type="text/javascript"></script>
<script src="mobileBUGFix.js" type="text/javascript"></script>
<script>
    $(function () {
        $(".relationship").select({
            title: "选择关系",
            items: ["孩子", "朋友", "伴侣", "家人"],
            onOpen: function () {
                $('.birthday').attr("disabled", "disabled");
            },
            onClose: function () {
                $(".birthday").removeAttr("disabled");
            }
        });
        $(".birthday").removeAttr("readOnly");
        $(".birthday").removeAttr("readonly");
        $(".relationship").attr("readonly", "readonly");
        var myDate = new Date;
        var year = myDate.getFullYear(); //获取当前年
        var mon = myDate.getMonth() + 1; //获取当前月
        var date = myDate.getDate(); //获取当前日
        var maxDate = year + "-" + 12 + "-" + 31;
        $(".birthday").datetimePicker({
            title: '请选择TA的生日',
            times: function () {
                return [];
            },
            max: maxDate,
            onOpen: function () {
                $('.relationship').attr("disabled", "disabled");
            },
            onClose: function () {
                $(".relationship").removeAttr("disabled");
            }
        });

        //FastClick.attach(document.body);
        $('#preViewImg').click(function () {
            $('#uploaderInput').click();
        });
        $('#uploaderInput').localResizeIMG({
            width: 600,
            quality: 0.9,
            success: function (result) {
                $("#preViewImg").css("display", "block");
                $("#preViewImg").css("background-size", "contain");
                $('#preViewImg').css("background-image", 'url(' + result.base64 + ')');
                $('#preViewImg').attr("data-img", result.base64);
                $('.weui-uploader__input-box').hide();

            }
        });
        $('#validateImg').attr({
            src: baseUrl + '/OrdersPraise/open/validate?uuid=' + getSessionId()
        });
    });


    function showTip1() {
        $.toptip('请查看卡片卡密', 'success');
    }

    function showTip() {
        $.toptip('请查看蛋糕盒上标签纸上的单号，或者美团、饿了么等第三方平台单号', 'success');
    }

    function submitInfo() {
        if (openId == '' || openId == null || openId == undefined) {
            $.toptip('请刷新页面后重新提交', 'error');
            return;
        }
        if ($('#ordNo').val() == '') {
            $.toptip('请输入单号', 'error');
            return;
        }

        //生日标签
        var tags = [];
        var rsInput = $('.relationship');
        var birInput = $('.birthday');
        for (let i = 0; i < (app.tagNum + 1); i++) {
            if ( $(rsInput[i]).val() == '') {
                continue;
            }
            if ($(birInput[i]).val() == '') {
                continue;
            }
            tags.push({birthday: $(birInput[i]).val(), relationship: $(rsInput[i]).val()})
        }
        /*if ($('#cdkey').val() == '') {
            $.toptip('请输入卡密', 'success');
            return;
        }*/
        if ($('#preViewImg').attr("data-img") == '') {
            $.toptip('请上传订单好评截图', 'error');
            return;
        }

        $.showLoading();
        $.ajax({
            url: baseUrl + '/OrdersPraise/open/save',
            data: {
                // "cdkey": $('#cdkey').val(),
                "xmbzNo": $('#ordNo').val().replace('#',''),
                "validate": $('#validate').val(),
                "filePraisePath": $('#preViewImg').attr("data-img"),
                "openId": openId,
                "nickName": nickName,
                "unionId": unionid === undefined ? null : unionid,
                "uuid": sessionStorage.getItem("uuid"),
                "tags": JSON.stringify(tags)
            },
            type: "post",
            success: function (data) {
                $.hideLoading();
                if (data.code == 200) {
                    $("#page1").hide();
                    $("#page2").show();
                } else {
                    $('#validateImg').attr({
                        src: baseUrl + '/OrdersPraise/open/validate?uuid=' + sessionStorage.getItem("uuid")
                    });
                    $.toptip(data.msg, 'error');
                }
            },
            error: function (ex) {
                $.hideLoading();
                $.toptip("提交失败请刷新页面，重新提交", 'error');
            }
        });
    }
</script>

</body>

</html>